<!--
 * @Description: 新建网元
 * @Author: 0001100986/LiuShuai
 * @Date: 2021-07-17 09:04:06
 * @LastEditTime: 2021-11-11 16:21:14
 * @LastEditors: 0001100986/LiuShuai
-->
<template>
  <div class="ne-content">
    <div class="info">
      <h1 class="title">新建网元</h1>
      <el-form :model="form" class="form" :rules="rules" ref="deviceForm" label-width="100px">
        <!-- 名称 -->
        <el-form-item label="设备名称" prop="userlabel" key="userlabel">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.userlabel" maxlength="100" />
          </el-col>
        </el-form-item>
        <!-- 类型 -->
        <el-form-item label="网元类型" prop="neLayer" key="neLayer">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.neLayer" style="width: 100%;" @change="selDeviceType">
              <el-option value="Access" label="CPE"></el-option>
              <el-option value="Mixed" label="POP"></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- 型号 -->
        <el-form-item label="设备型号" prop="type" key="type">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.type" style="width: 100%;" @change="selNeType">
              <el-option
                v-for="(item, index) in types"
                :key="index"
                :value="item.id"
                :label="item.displayName"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- 子型号 -->
        <el-form-item label="子型号" prop="subType" key="subType">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-select v-model="form.subType" style="width: 100%;">
              <el-option
                v-for="(item, index) in childrenType"
                :key="index"
                :value="item"
                :label="item"
              ></el-option>
            </el-select>
          </el-col>
        </el-form-item>
        <!-- 软件SN -->
        <el-form-item
          label="软件SN"
          prop="sn"
          key="sn"
          :rules="[{required: true, pattern: /^[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}:[a-zA-Z0-9]{1}[a-zA-Z0-9]{1}$/, message: '软件SN不符合规范', trigger: 'blur'}]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.sn" />
          </el-col>
        </el-form-item>
        <!-- IP地址 -->
        <template v-if="form.neLayer === 'Mixed' || form.subType === '6800_4E'">
          <el-form-item
            label="IP地址"
            prop="ipAddress"
            key="ipAddress"
            :rules="[{required: true, pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/(\d|[1-2]\d|3[0-2]))?$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^:((:[\da-fA-F]{1,4}){1,6}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$|^([\da-fA-F]{1,4}:){6}:(\/([1-9]?\d|(1([0-1]\d|2[0-8]))))?$/, message: '请填写IPv4 or IPv6/Mask', trigger:'blur'}]"
          >
            <el-col :xs="24" :sm="12" :lg="6">
              <el-input v-model.trim="form.ipAddress" />
            </el-col>
          </el-form-item>
        </template>
        <!-- 管理状态 -->
        <el-form-item label="管理状态" prop="managementState" key="managementState">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-switch
              v-model="form.managementState"
              active-color="#13ce66"
              inactive-color="#ff4949"
            ></el-switch>
          </el-col>
        </el-form-item>
        <!-- 通讯方式 -->
        <el-form-item label="通讯方式" prop="telnetConfig" key="telnetConfig">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-radio v-model="form.telnetConfig" label="SSH">SSH</el-radio>
            <el-radio v-model="form.telnetConfig" label="Telnet">Telnet</el-radio>
          </el-col>
        </el-form-item>
        <!-- 端口 -->
        <el-form-item label="服务端口" prop="port" key="port">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input-number v-model="form.port" :min="0" :max="255"></el-input-number>
          </el-col>
        </el-form-item>
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="username" key="username">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.username" />
          </el-col>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="登录密码" prop="password" key="password">
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model="form.password" type="password" maxlength="14" />
          </el-col>
        </el-form-item>
        <!-- 业务环回地址 -->
        <el-form-item
          label="业务环回地址"
          prop="loopbackIp"
          key="loopbackIp"
          :rules="[{ pattern: /^((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){6}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^::([\da-fA-F]{1,4}:){0,4}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:):([\da-fA-F]{1,4}:){0,3}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){2}:([\da-fA-F]{1,4}:){0,2}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){3}:([\da-fA-F]{1,4}:){0,1}((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){4}:((25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(25[0-5]|2[0-4]\d|[01]?\d\d?)$|^([\da-fA-F]{1,4}:){7}[\da-fA-F]{1,4}$|^:((:[\da-fA-F]{1,4}){1,6}|:)$|^[\da-fA-F]{1,4}:((:[\da-fA-F]{1,4}){1,5}|:)$|^([\da-fA-F]{1,4}:){2}((:[\da-fA-F]{1,4}){1,4}|:)$|^([\da-fA-F]{1,4}:){3}((:[\da-fA-F]{1,4}){1,3}|:)$|^([\da-fA-F]{1,4}:){4}((:[\da-fA-F]{1,4}){1,2}|:)$|^([\da-fA-F]{1,4}:){5}:([\da-fA-F]{1,4})?$|^([\da-fA-F]{1,4}:){6}:$/, message: '请填写IPv4 or IPv6', trigger:'blur'}]"
        >
          <el-col :xs="24" :sm="12" :lg="6">
            <el-input v-model.trim="form.loopbackIp" />
          </el-col>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 90px" @click="cancel">返回</el-button>
          <el-button type="primary" style="width: 90px" @click="submitForm('deviceForm')">创建</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import crypo from 'crypto-browserify';
export default {
  props: ['product'],
  // 监听值
  watch: {
    // 网元类型
    'form.neLayer': function(val) {
      let _this = this;
      _this.form.type = null;
      _this.form.subType = null;
    },
    // 设备型号
    'form.type': function(val) {
      let _this = this;
      _this.form.subType = null;
    },
    // 链接方式
    'form.telnetConfig': function(val) {
      let _this = this;
      if (val === 'SSH') {
        _this.form.port = 22;
      } else {
        _this.form.port = 23;
      }
    }
  },
  filters: {
    // 过滤SN - MAC地址
    filterSN (val) {
      if (val === null || val === '') {
        return '';
      } else {
        // 转换数组
        let mac = val.split(':');
        for (let i = 0; i < mac.length; i++) {
          if (i === 0) {
            if (mac[i].indexOf('0') === 0) {
              mac[i] = mac[i].substring(1, mac[i].length);
            }
          } else {
            if (mac[i].indexOf('0') === 0) {
              mac[i] = ' ' + mac[i].substring(1, mac[i].length);
            }
          }
        }
        mac = mac.join(':');
        return mac;
      }
    }
  },
  data () {
    return {
      // 设备型号
      types: [],
      // 子型号
      childrenType: [],
      form: {
        userlabel: null,
        neLayer: null,
        sn: null,
        type: null,
        subType: null,
        ipAddress: null,
        managementState: true,
        telnetConfig: 'Telnet',
        port: 23,
        username: 'zte',
        password: 'zte',
        loopbackIp: '0.0.0.0'
      },
      rules: {
        userlabel: [{
          required: true,
          message: '请填写设备名称',
          trigger: 'blur'
        }],
        neLayer: [{
          required: true,
          message: '请选择网元类型',
          trigger: 'change'
        }],
        type: [{
          required: true,
          message: '请选择设备型号',
          trigger: 'change'
        }],
        subType: [{
          required: true,
          message: '请选择子型号',
          trigger: 'change'
        }],
        managementState: [{
          required: true,
          trigger: 'change'
        }],
        telnetConfig: [{
          required: true,
          trigger: 'change'
        }],
        port: [{
          required: true,
          message: '请输入服务端口号',
          trigger: 'blur'
        }],
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入登录密码',
          trigger: 'blur'
        }]
      }
    };
  },
  methods: {
    // 返回
    cancel () {
      let _this = this;
      _this.$emit('handleChange', 0);
    },
    // 选择设备类型
    selDeviceType () {
      let _this = this;
      if (_this.form.neLayer === 'Mixed') {
        let arry = [];
        for (let i = 0; i < _this.product.length; i++) {
          if (_this.product[i].extAttrs.series === 'pop') {
            arry.push(_this.product[i]);
          }
        }
        _this.types = arry;
      } else {
        let arry = [];
        for (let i = 0; i < _this.product.length; i++) {
          if (_this.product[i].extAttrs.series === 'cpe') {
            arry.push(_this.product[i]);
          }
        }
        _this.types = arry;
      }
    },
    // 选择网元型号
    selNeType () {
      let _this = this;
      let arry = [];
      for (let i = 0; i < _this.types.length; i++) {
        if (_this.form.type === _this.types[i].id) {
          arry = _this.types[i].extAttrs.subTypes;
        }
      }
      _this.childrenType = arry;
    },
    submitForm (formName) {
      let _this = this;
      _this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 二次加密
          const response = await _this.$http.get({ url: '/action/csrf' });
          const tokenValue = response.token;
          const cipher = crypo.createCipher('aes-128-ecb', tokenValue);
          cipher.update(_this.form.password);
          _this.form.password = cipher.final('base64');
          // 软件SN过滤
          let sn = _this.form.sn;
          let fsn = _this.$options.filters['filterSN'](sn);
          // 过滤所选网元类型的配置参数
          let selNe = {};
          for (let i = 0; i < _this.product.length; i++) {
            if (_this.product[i].id === _this.form.type) {
              selNe = _this.product[i];
            }
          }
          // 网元参数
          let params = {
            'userlabel': _this.form.userlabel,
            'sn': fsn,
            'dgId': _this.$store.state.user.user.info.dgId,
            'managementType': 'DIRECT',
            'dcnRole': 'NORMAL',
            'parentId': 0,
            'type': _this.form.type,
            'subType': _this.form.subType,
            'ipAddress': _this.form.neLayer === 'Access' && _this.form.subType !== '6800_4E' ? null : _this.form.ipAddress,
            'macAddress': null,
            'neLayer': _this.form.neLayer,
            'neClassification': 'UNKNOWN',
            'longitude': null,
            'customer': null,
            'latitude': null,
            'netconfPort': 830,
            'loopbackIp': _this.form.loopbackIp,
            'managementState': _this.form.managementState ? 'ONLINE' : 'OFFLINE',
            'cpuOverloadProtection': 0,
            'vendor': selNe.extAttrs.vendor,
            'version': {
              // platformVersion
              'software': { 'value': '6.00.10', 'userlabel': '6.00.10' },
              // versions
              'hardware': { 'value': '1.0', 'userlabel': '1.0' }
            },
            'authInfo': {
              'username': _this.form.username,
              'password': _this.form.password
            },
            'snmpConfig': {
              'community': selNe.extAttrs.community,
              'writeCommunity': selNe.extAttrs.writeCommunity,
              'version': 'v2c',
              'port': 161,
              'retries': 1,
              'timeout': 5
            },
            'telnetConfig': {
              'ssh': _this.form.telnetConfig === 'SSH',
              'port': _this.form.port
              // 'enableCommand': _this.form.type === 'ZXR10_V1000' ? 'Zxr10_IPTN' : 'enable 18'
            },
            'location': null,
            'extAttrs': {
              'esn': fsn,
              'allEsn': sn
            }
          };
          // 创建网元请求
          _this.$http.post({
            url: '/api/sdwan/ne',
            data: params,
            loading: true
          }).then(res => {
            let { status } = res;
            if (status === '0') {
              _this.$message.success('创建成功！');
              _this.resetForm(formName);
              _this.cancel();
              _this.$parent.refresh();
            }
          });
        } else {
          this.$message.error('请检查必填项！');
          return false;
        }
      });
    },
    resetForm (formName) {
      this.$refs[formName].resetFields();
      this.form = {
        userlabel: null,
        neLayer: null,
        sn: null,
        type: null,
        subType: null,
        ipAddress: null,
        managementState: true,
        telnetConfig: 'Telnet',
        port: 23,
        username: 'zte',
        password: 'zte',
        loopbackIp: '0.0.0.0'
      };
    }
  }
};
</script>

<style lang="scss" scoped>
.ne-content {
  .header {
    background: #fff;
    padding: 30px 40px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    .left-wrap {
      .avatar {
        width: 110px;
        height: 110px;
        object-fit: cover;
        border-radius: 50%;
      }

      h2 {
        font-size: 30px;
        margin-top: 20px;
        font-weight: 500;
      }

      p {
        color: #9ca3ae;
        font-size: 14px;
        margin-top: 20px;
        display: none;
      }

      .task {
        margin-top: 30px;
        display: flex;
        align-items: center;

        span {
          color: #9ca3ae;
          font-size: 14px;
          margin-right: 30px;
          margin-left: 8px;
        }
      }
    }

    .right-wrap {
      display: flex;
      align-items: center;

      img {
        width: 230px;
      }
    }
  }

  .info {
    background: #fff;

    .title {
      font-size: 22px;
      font-weight: 500;
      padding: 15px 40px;
      border-bottom: 1px solid #eee;
    }

    .form {
      padding: 30px 40px;
      box-sizing: border-box;
    }
  }
}

@media only screen and (max-width: $device-ipad) {
  .ne-content {
    .header {
      padding: 20px 20px;

      .left-wrap {
        .avatar {
          width: 90px;
          height: 90px;
        }

        h2 {
          font-size: 20px;
          margin-top: 20px;
        }

        .task {
          margin-top: 15px;

          .icon {
            width: 2.8em;
            height: 2.8em;
            vertical-align: -0.15em;
          }

          span {
            font-size: 15px;
          }
        }
      }

      .right-wrap {
        display: flex;
        align-items: center;

        img {
          display: none;
        }
      }
    }

    .info {
      .title {
        font-size: 18px;
        padding: 15px 20px;
      }

      .form {
        padding: 30px 20px;
      }
    }
  }
}
</style>